<template>
    <div class="social">
        <!-- 面包屑导航栏 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/manage' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>工资系统</el-breadcrumb-item>
            <el-breadcrumb-item>社保卡</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索劳动合同 -->
        <el-row :gutter="20">
            <el-col :span="7">
                <el-input placeholder="请输入员工名称" v-model="socialList.staffName" clearable></el-input>
            </el-col>
            <el-col :span="7">
                <el-input placeholder="请输入社保卡号" v-model="socialList.cardId" clearable></el-input>
            </el-col>
            <el-col :span="2">
                <!--<el-button type="primary" @click="selectSocialCard">搜索</el-button>-->
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="addDialogVisible=true">添加社保信息</el-button>
            </el-col>
        </el-row>

        <!-- 卡片 社保卡列表 -->
        <el-card>
            <!-- 社保卡表格 -->
            <el-table :data="socialList" border stripe>
                <el-table-column prop="id" label="编号" width="80"></el-table-column>
                <el-table-column prop="staffName" label="姓名" width="80"></el-table-column>
                <el-table-column prop="cardId" label="社保卡卡号" width="180"></el-table-column>
                <el-table-column prop="purchaseDate" label="开始购买日期"></el-table-column>
                <el-table-column prop="dictName" label="社保类型"></el-table-column>
                <el-table-column prop="personalAmount" label="个人金额"></el-table-column>
                <el-table-column prop="pompanyAmount" label="公司金额" width="150"></el-table-column>
                <el-table-column prop="abandonBuyingDate" label="弃买日期"></el-table-column>
                <el-table-column prop="insertTime" label="新增日期"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            icon="el-icon-edit"
                            @click="editSocial(scope.row)"
                        >修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="laborSizeChange"
                @current-change="laborCurrentChange"
                :current-page="socialInfo.begin"
                :page-size="socialInfo.length"
                layout="total, prev, pager, next"
                :total="total"
            ></el-pagination>
        </el-card>
        <!-- 添加合同弹出框 -->
        <!--<el-dialog title="添加劳动合同" :visible.sync="addDialogVisible" width="50%">-->
            <!--&lt;!&ndash; 添加劳动合同表单 &ndash;&gt;-->
            <!--<el-form :model="laborForm" :rules="laborFormRules" ref="laborFormRef" label-width="80px">-->
                <!--<el-form-item label="编号" prop="id">-->
                    <!--<el-input v-model="laborForm.id"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="生效日期" prop="effective_date">-->
                    <!--<el-input v-model="laborForm.effective_date"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="失效日期" prop="expiration_date">-->
                    <!--<el-input v-model="laborForm.expiration_date"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="合同图片" prop="img">-->
                    <!--<el-input v-model="laborForm.img"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="人员编号" prop="staffId">-->
                    <!--<el-input v-model="laborForm.staffId"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="新建时间" prop="insterTime">-->
                    <!--<el-input v-model="laborForm.insterTime"></el-input>-->
                <!--</el-form-item>-->
            <!--</el-form>-->
            <!--<span slot="footer" class="dialog-footer">-->
        <!--<el-button @click="addDialogVisible = false">取 消</el-button>-->
        <!--<el-button type="primary" @click="addDialogVisible = false">确 定</el-button>-->
      <!--</span>-->
        <!--</el-dialog>-->
<!---->
         <!--修改社保卡弹出框-->
        <el-dialog title="修改社保信息" :visible.sync="editDialogVisible" width="40%">
            <!-- 添加社保卡表单 -->
            <el-form
                :model="editSocialForm"
                :rules="socialFormRules"
                ref="editSocialFormRef"
                label-width="40%"
            >
                <el-form-item label="编号:" prop="id" >
                    <el-input disabled v-model="editSocialForm.id" style="width: 40%;"></el-input>
                </el-form-item>
                <el-form-item label="姓名:" prop="staffName">
                    <el-input v-model="editSocialForm.staffName" style="width: 40%;"></el-input>
                </el-form-item>
                <el-form-item label="社保卡号:" prop="cardId">
                    <el-input v-model="editSocialForm.cardId" style="width: 40%;"></el-input>
                </el-form-item>
                <el-form-item label="开始日期:" prop="purchaseDate">
                    <el-date-picker
                        v-model="editSocialForm.purchaseDate"
                        type="date"
                        start-placeholder="开始日期:">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="个人金额:" prop="personalAmount">
                    <el-input v-model="editSocialForm.personalAmount" type="number" style="width: 40%;"></el-input>
                </el-form-item>
                <el-form-item label="公司金额:" prop="pompanyAmount">
                    <el-input v-model="editSocialForm.pompanyAmount" style="width: 40%;"></el-input>
                </el-form-item>
                <el-form-item label="弃买日期:" prop="abandonBuyingDate">
                    <el-date-picker
                        v-model="editSocialForm.abandonBuyingDate"
                        type="date"
                        start-placeholder="弃买日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="新增时间" prop="insertTime">
                    <el-input disabled v-model="editSocialForm.insertTime" style="width: 40%;"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="updateSocial()">确 定</el-button>
            <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
        </el-dialog>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            style="width: 70%;"
            :before-close="handleClose">
            <span>确定修改？</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
         <el-button @click="dialogVisible = false">取 消</el-button>

  </span>
        </el-dialog>
    </div>
</template>

<script>
    import { selectSocialCard } from "../api/common";
    export default {
        name: "socialCard",
        data() {
            return {
                //  社保卡列表
                socialList: [],
                // 总条数
                total: 0,
                //   控制添加社保卡弹出框
                addDialogVisible: false,
                //控制提交修改，新增提示框
                dialogVisible: false,

                // 添加社保卡信息表单数据
                socialInfo: {
                    //   模糊查询条件
                    staffName: "",
                    cardId: "",
                    //  开始页码
                    begin: 1,
                    //   每页长度
                    length: 10
                },

                socialForm: {

                },
                //   添加社保信息规则
                socialFormRules: {
                    staffName: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                        ],
                    effectiveDate: [
                        { required: true, message: "请选择生效日期", trigger: "change" }
                        ],
                    card_id: [
                        { required: true, message: "请输入社保卡号", trigger: "blur" }
                        ],
                    purchaseDate: [
                        { required: true, message: "请选择开始购买日期", trigger: "change" }
                        ],
                    personalAmount: [
                        { required: true, message: "请输入个人金额" }
                    ],
                    pompanyAmount: [
                        { required: true, message: "请输入公司金额" }
                    ],
                    abandonBuyingDate: []
                },
                // 修改社保卡合同
                editDialogVisible: false,
                // 个人社保卡信息
                editSocialForm: {
                }
            };
        },
        created() {
            this.selectSocialCard();
        },
        methods: {
            //   获取劳动合同列表
            selectSocialCard() {
                selectSocialCard(this.socialInfo).then(res => {
                    this.socialList = res.data.list.data;
                    this.total = res.data.list.total;
                });
            },
            // 最新页面长度
            laborSizeChange(newSize) {
                this.laborInfo.length = newSize;
                this.selectSocialCard();
            },
            // 最新页面页数
            laborCurrentChange(newPage) {
                this.laborInfo.begin = newPage;
                this.selectSocialCard();
            },
            //修改社保卡合同
            editSocial(userInfo) {
                this.editSocialForm = userInfo;
                this.editDialogVisible = true;
            },
            updateSocial() {
                this.dialogVisible = true;
            }
        }

    };
</script>

<style lang="less" scoped>
    .labor {
        padding: 20px;
    }
    .el-card {
        margin-top: 15px;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0.1) !important;
    }

    .el-col {
        margin-top: 15px;
    }

    .el-pagination {
        margin-top: 15px;
    }
</style>
